<template>
  <view class="login">
    <u-navbar
      title="登录"
      bgColor="transparent"
      :fixed="false"
      :autoBack="true"
      leftIconColor="#fff"
    >
      <template #center>
        <text style="color: #fff"> 登录 </text>
      </template>
    </u-navbar>
    <view class="content">
      <!-- 主体表单 -->
      <view class="form-body">
        <view class="main">
          <image
            src="/static/login/ava.png"
            style="width: 141rpx; height: 150rpx; border-radius: 50%"
          ></image>
          <wInput
            v-model="tel"
            type="text"
            maxlength="35"
            placeholder="请输入手机号"
            class="w-input"
            :focus="isFocus"
          ></wInput>
          <wInput
            v-model="pass"
            type="password"
            class="w-input"
            maxlength="20"
            placeholder="请输入密码"
            isShowPass
          ></wInput>
        </view>
        <wButton
          :componentStyle="{
            borderRadius: '8rpx',
            fontWeight: '500',
            borderRadius:'49rpx'
          }"
          fontColor="#fff"
          bgColor="linear-gradient(270deg, #4DCBA5 0%, #6BD6B5 100%)"
          class="wbutton"
          :text="an_text"
          :rotate="isRotate"
          @click="startLogin"
        ></wButton>
        <!-- <view style="display: flex; align-items: center; margin-top: 30rpx">
          <u-checkbox-group v-model="checked">
            <u-checkbox shape="circle" :name="true"></u-checkbox>
          </u-checkbox-group>
          <text style="font-size: 24rpx; color: #999">
            我已同意<text
              class="active-font"
              @click="openDialog('用户服务协议')"
              >《用户服务协议》</text
            >及<text @click="openDialog('隐私政策')" class="active-font"
              >《隐私政策》</text
            >
          </text>
        </view> -->

        <!-- 其他登录 -->
        <!-- <view class="other_login cuIcon">
				<view class="login_icon">
					<view class="cuIcon-weixin" @tap="login_weixin"></view>
				</view>
				<view class="login_icon">
					<view class="cuIcon-weibo" @tap="login_weibo"></view>
				</view>
				<view class="login_icon">
					<view class="cuIcon-github" @tap="login_github"></view>
				</view>
			</view> -->

        <!-- 底部信息 -->
        <view class="footer">
          <navigator url="forget" open-type="navigate">忘记密码</navigator>
          <text>|</text>
          <navigator url="register" open-type="navigate">注册账号</navigator>
        </view>
      </view>
      <u-popup
        mode="bottom"
        :show="pop_show"
        :round="16"
        :closeOnClickOverlay="false"
      >
        <view style="display: flex; flex-direction: column; width: 100%">
          <view
            style="
              display: flex;
              height: 100rpx;
              justify-content: space-between;
              line-height: 100rpx;
              padding: 0 30rpx 0 30rpx;
            "
          >
            <view
              style="
                display: inline-block;
                font-size: 32rpx;
                font-weight: 500;
                color: #000;
              "
            >
              <text>{{ pop_title }}</text>
            </view>
            <view
              style="display: flex; margin: auto 0"
              @click="pop_show = false"
            >
              <u-icon color="#777777" size="16" name="close"></u-icon>
            </view>
          </view>
          <scroll-view
            style="padding: 0 30rpx; width: calc(100% - 60rpx); height: 70vh"
            scroll-y="true"
          >
            <p v-html="pop_content"></p>
          </scroll-view>
          <view style="height: 10px"></view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
let _this;
import wInput from "../../components/watch-login/watch-input.vue"; //input
import wButton from "../../components/watch-login/watch-button.vue"; //button
import w_md5 from "../../js_sdk/zww-md5/w_md5.js";
export default {
  data() {
    return {
      //logo图片 base64
      logoImage: "/static/logo.png",
      tel: "", //用户登陆邮箱
      pass: "", //密码
      isRotate: false, //是否加载旋转
      isFocus: true, // 是否聚焦
      time: "",
      token: "",
      app_key: "",
      websiteUrl: "",
      checked: [],
      an_text: "登 录", //登录按钮标题
      pop_show: false,
      pop_content: "",
      pop_title: "",
    };
  },
  components: {
    wInput,
    wButton,
    w_md5,
  },
  onLoad() {},
  mounted() {
    _this = this;
    //this.isLogin();
    this.popContent = uni.getStorageSync("txt");
  },
  methods: {
    openDialog(value) {
      this.pop_title = value;
      if (value === "用户服务协议") {
        this.pop_content = this.popContent.agreement;
      } else {
        this.pop_content = this.popContent.privacy;
      }
      this.pop_show = true;
    },
    unescapeHTML(htmlString) {
      const txt = document.createElement("textarea");
      txt.innerHTML = htmlString;
      return txt.value;
    },
    isLogin() {
      //判断缓存中是否登录过，直接登录
      // try {
      // 	const value = uni.getStorageSync('setUserData');
      // 	if (value) {
      // 		//有登录信息
      // 		console.log("已登录用户：",value);
      // 		_this.$store.dispatch("setUserData",value); //存入状态
      // 		uni.reLaunch({
      // 			url: '../../../pages/index',
      // 		});
      // 	}
      // } catch (e) {
      // 	// error
      // }
    },
    startLogin(e) {
      console.log(e);
      //登录
      if (this.isRotate) {
        //判断是否加载中，避免重复点击请求
        return false;
      }
      // if (!this.checked[0]) {
      //   return uni.showToast({
      //     icon: "none",
      //     position: "bottom",
      //     title: "请先确认协议",
      //   });
      // }
      // if (!uni.$u.test.email(this.email)) {
      // uni.showToast({
      // 	icon: 'none',
      // 	position: 'bottom',
      // 	title: '邮箱不正确'
      // });
      // 	return false;
      // }
      if (this.pass.length < 6) {
        uni.showToast({
          icon: "none",
          position: "bottom",
          title: "密码不正确",
        });
        return;
      }

      _this.isRotate = true;

      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;

      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&pass=" +
        this.pass +
        "&tel=" +
        this.tel +
        "&timestamp=" +
        time;
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/login/index?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log(res.data);
          if (res.data.code == 0) {
            _this.isRotate = false;
            uni.showToast({
              icon: "none",
              position: "bottom",
              title: res.data.msg,
            });
          } else {
            getApp().globalData.uid = res.data.uid;
            getApp().globalData.utoken = res.data.token;
            uni.setStorageSync("user", {
              uid: res.data.uid,
              utoken: res.data.token,
            });
            uni.setStorage({
              key: "notice",
              data: true,
            });
            _this.isRotate = false;
            this.an_text = "登录成功";
            uni.showToast({
              icon: "none",
              position: "bottom",
              title: "登录成功",
            });
            uni.navigateBack();
            console.log("登录成功", uni.getStorageSync("user"));
          }
        },
      });

      // setTimeout(function(){
      // 	_this.isRotate=false
      // },3000)
      // uni.showLoading({
      // 	title: '登录中'
      // });
      // getLogin()
      // .then(res => {
      // 	//console.log(res)
      // 	//简单验证下登录（不安全）
      // 	if(_this.phoneData==res.data.username && _this.passData==res.data.password){
      // 		let userdata={
      // 			"username":res.data.username,
      // 			"nickname":res.data.nickname,
      // 			"accesstoken":res.data.accesstoken,
      // 		} //保存用户信息和accesstoken
      // 		_this.$store.dispatch("setUserData",userdata); //存入状态
      // 		try {
      // 			uni.setStorageSync('setUserData', userdata); //存入缓存
      // 		} catch (e) {
      // 			// error
      // 		}
      // 		uni.showToast({
      // 			icon: 'success',
      // 			position: 'bottom',
      // 			title: '登录成功'
      // 		});
      // 		uni.reLaunch({
      // 			url: '../../../pages/index',
      // 		});
      // 	}else{
      // 		_this.passData=""
      // 		uni.showToast({
      // 			icon: 'error',
      // 			position: 'bottom',
      // 			title: '账号或密码错误，账号admin密码admin'
      // 		});
      // 	}
      // 	uni.hideLoading();
      // }).catch(err => {
      // 	uni.hideLoading();
      // })
    },
    login_weixin() {
      //微信登录
      uni.showToast({
        icon: "none",
        position: "bottom",
        title: "暂不支持",
      });
    },
    login_weibo() {
      //微博登录
      uni.showToast({
        icon: "none",
        position: "bottom",
        title: "暂不支持",
      });
    },
    login_github() {
      //github登录
      uni.showToast({
        icon: "none",
        position: "bottom",
        title: "暂不支持",
      });
    },
    goBack() {
      uni.navigateBack({});
    },
  },
};
</script>

<style>
@import url("../../components/watch-login/css/icon.css");
@import url("./css/main.css");
</style>
<style lang="less" scoped>
.form-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  // width: 594rpx;
  // margin: auto;
  background-color: #fff;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
}

.active-font {
  color: #3dc6e0;
}

.title {
  font-size: 34rpx;
  font-weight: 500;
  color: #ffffff;
  line-height: 48rpx;
  margin-left: 278rpx;
}
.login {
  min-height: 100vh;
  background: linear-gradient(360deg, #6bd6b5 0%, #2ab1a4 100%);
}
.content {
  background-color: #fff;
  width: calc(100% - 48rpx);
  margin: auto;
  border-radius: 16rpx;
  padding-bottom: 64rpx;
  margin-top: 57rpx;
}
.w-input {
  background: #f0f8f5;
  border-radius: 44rpx;
  width: 100%;
}
.main {
  padding: 0 39rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 63rpx;
  width: calc(100% - 78rpx);
}
.footer{
  margin-top: 41rpx;
}
</style>
